<script setup lang="ts">
import {nextTick, onMounted, onUnmounted, reactive, ref} from "vue";
import SysDialog from "@/components/dialog/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import {BomListParam} from "@/api/bom/type";
import {getListApi} from "@/api/bom";
import {Search, Refresh} from '@element-plus/icons-vue'

// 组件状态定义
const {dialog, onShow, onClose} = useDialog()

// 定义emit事件
const emit = defineEmits(['handleBomSelectionChange', 'confirmBomSelect'])

// 表格高度自适应
const tableHeight = ref(0)

// 表格相关
const tableData = ref([])
const loading = ref(false)
const paginationData = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
})

// 查询表单
const searchForm = reactive<BomListParam>({
  bomCode: undefined,
  bomName: undefined,
  isActive: undefined,
  page: 1,
  limit: 10
})

// 查询方法
const search = () => {
  paginationData.currentPage = 1
  getTableData()
}

// 重置查询
const reset = () => {
  searchForm.bomCode = undefined
  searchForm.bomName = undefined
  searchForm.isActive = undefined
  search()
}

// 获取表格数据
const getTableData = async () => {
  loading.value = true
  try {
    searchForm.page = paginationData.currentPage
    searchForm.limit = paginationData.pageSize
    let res = await getListApi(searchForm)
    if (res && res.data) {
      tableData.value = res.data.list
      paginationData.total = res.data.total
    }
  } catch (error) {
    console.error('获取表格数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 选择BOM
const handleSelect = (selection: any[]) => {
  emit('handleBomSelectionChange', selection)
}

// 确认选择
const confirmBom = () => {
  emit('confirmBomSelect')
}

// 生命周期钩子
onMounted(() => {
  dialog.height = 500
  dialog.width = 1000
  dialog.title = '选择BOM'
  getTableData()
  nextTick(() => {
    tableHeight.value = 380
  })
})

// 暴露方法给父组件
defineExpose({
  onShow,
  onClose
})
</script>

<template>
  <sys-dialog
      :title="dialog.title"
      :width="dialog.width"
      :visible="dialog.visible"
      :height="dialog.height"
      @onClose="onClose"
      @on-confirm="confirmBom"
  >
    <template #content>
      <div class="bom-dialog-container">
        <!-- 查询表单区域 -->
        <el-card class="search-card">
          <el-form :inline="true" :model="searchForm">
            <el-form-item label="BOM编码">
              <el-input v-model="searchForm.bomCode" placeholder="请输入BOM编码"/>
            </el-form-item>
            <el-form-item label="BOM名称">
              <el-input v-model="searchForm.bomName" placeholder="请输入BOM名称"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">
                <el-icon>
                  <Search/>
                </el-icon>
                查询
              </el-button>
              <el-button @click="reset">
                <el-icon>
                  <Refresh/>
                </el-icon>
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 表格区域 -->
        <el-table
            v-loading="loading"
            :data="tableData"
            border
            :height="tableHeight"
            style="margin-top: 15px"
            @selection-change="handleSelect"
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column prop="bomCode" label="BOM编码" min-width="120"/>
          <el-table-column prop="bomName" label="BOM名称" min-width="120"/>
          <el-table-column prop="materialTotalPrices" label="物料总价" min-width="120"/>
          <el-table-column prop="processTotalPrices" label="工序总价" min-width="120"/>
          <el-table-column prop="totalPrices" label="总价" min-width="120"/>
          <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip/>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            v-model:current-page="paginationData.currentPage"
            v-model:page-size="paginationData.pageSize"
            :page-sizes="[10, 20, 50]"
            :total="paginationData.total"
            layout="total, sizes, prev, pager, next"
            class="pagination"
            @size-change="getTableData"
            @current-change="getTableData"
        />
      </div>
    </template>
  </sys-dialog>
</template>

<style scoped lang="scss">
.bom-dialog-container {
  padding: 0 10px;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}

.el-pagination {
  margin-top: 10px;
  justify-content: flex-end;
}

.search-card {
  height: 65px;

  :deep(.el-card__body) {
    padding: 10px;
  }
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 10px;
  margin-bottom: 0;
}

:deep(.el-input) {
  width: 180px;
}
</style>
